<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/5.magnifier.css">

</head>

<body>
    <top></top>
    <!-- 中心区域 -->
    <section>
        <!-- 放大镜  -->
        <div class="fang">
            <!-- 放大镜左边区域 -->
            <div class="left">
                <!-- 所有的li图片 -->
                <ul class="goods_img">
                    <li><img src="img/5-1.jpg" alt="">
                    </li>
                    <li class="curn"><img src="img/5-2.jpg" alt="">
                    </li>
                    <li><img src="img/5-3.jpg" alt="">
                    </li>
                    <li><img src="img/5-4.jpg" alt="">
                    </li>
                    <li><img src="img/5-5.jpg" alt="">
                    </li>
                </ul>
                <!-- 原图的盒子区域 -->
                <div class="small_box"> <img src="img/5-1.jpg" alt="">
                    <!-- 遮罩区域 -->
                    <div class="box"></div>
                </div>
                <!-- 放大区域 -->
                <div class="bigBox"></div>
            </div>
            <!-- 放大镜右边区域 -->
            <div class="right">
                <p>跑鞋</p>
                <h3>【谷爱凌同款】【安踏冠军健身训练系列】安踏国家队科技男子跑步训练跑鞋</h3>
                <p>款号:112225580A</p>
                <h2>￥699.00</h2>
                <div class="tu">
                    <img src="img/5-1.jpg" alt="">
                </div>
                <div class="chima">
                    <span>尺码:</span>
                    <input type="text" placeholder="请输入尺码">
                    <!-- 选择码数区域 -->
                    <div class="mashu">
                        <!-- 右边的叉号区域 -->
                        <div class="cha"></div>
                        <!-- 请选择符合您的码数区域 -->
                        <div class="wenzi">
                            请选择符合您的码数
                        </div>
                        <ul>
                            <li><a href="javascript:;">39</a></li>
                            <li><a href="javascript:;">40</a></li>
                            <li><a href="javascript:;">40.5</a></li>
                            <li><a href="javascript:;">41</a></li>
                            <li><a href="javascript:;">42</a></li>
                            <li><a href="javascript:;">42.5</a></li>
                            <li><a href="javascript:;">43</a></li>
                            <li><a href="javascript:;">44</a></li>
                            <li><a href="javascript:;">45</a></li>
                        </ul>
                    </div>
                    <div class="san"></div>
                    <span>数量:</span>
                    <input type="text" placeholder="1" class="shu">
                    <!-- 数量区域 -->
                    <div class="shuliang">
                        <ul>
                            <li><a href="javascript:;">1</a></li>
                            <li><a href="javascript:;">2</a></li>
                            <li><a href="javascript:;">3</a></li>
                            <li><a href="javascript:;">4</a></li>
                            <li><a href="javascript:;">5</a></li>
                            <li><a href="javascript:;">6</a></li>
                            <li><a href="javascript:;">7</a></li>
                            <li><a href="javascript:;">8</a></li>
                            <li><a href="javascript:;">9</a></li>
                            <li><a href="javascript:;">10</a></li>
                        </ul>
                    </div>
                    <div class="san"></div>
                </div>
                <div class="lingqu">
                    领取优惠券
                </div>
                <!-- 底部两个盒子总区域 -->
                <div class="dibu">
                    <a href="javasrcipt:;">加入购物车</a>
                    <a href="javasrcipt:;" class="you">立即购买</a>
                </div>
            </div>
        </div>
        <!-- 商品细节区域 -->
        <div class="shang">商品细节</div>
        <!-- 总图片区域 -->
        <div class="imgage">
            <!-- 谷爱凌同款区域 -->
            <div class="gu">
                <img src="img/5-6.jpg" alt="">
            </div>
            <!-- 商品描述区域 -->
            <div class="shangpin">
                <img src="img/5-7.jpg" alt="">
            </div>
            <!-- 出色包裹支撑区域 -->
            <div class="chu">
                <img src="img/5-8.jpg" alt="">
            </div>
            <!-- 全尼龙展片区域 -->
            <div class="quan">
                <img src="img/5-9.jpg" alt="">
            </div>
            <!-- 后跟弧形区域 -->
            <div class="hou">
                <img src="img/5-10.jpg" alt="">
            </div>
            <!-- 澎湃推动力区域 -->
            <div class="peng">
                <img src="img/5-11.jpg" alt="">
            </div>
            <!-- 持久缓冲感区域 -->
            <div class="chi">
                <img src="img/5-12.jpg" alt="">
            </div>
            <!-- 外侧和内侧区域 -->
            <div class="wai">
                <img src="img/5-13.jpg" alt="">
            </div>
            <!-- 45度区域 -->
            <div class="du">
                <img src="img/5-14.jpg" alt="">
            </div>
            <!-- 细节展示区域 -->
            <div class="xi">
                <img src="img/5-15.jpg" alt="">
            </div>
            <!-- 鞋底区域 -->
            <div class="di">
                <img src="img/5-17.jpg" alt="">
            </div>
        </div>
    </section>
    <bottom></bottom>
</body>

</html>
<script src="js/jQuery.js"></script>
<script src="js/5.magnifier.js"></script>
<script>
    $("top").load("1.header.html");
    $("bottom").load("1.bottom.html");
</script>
<script>
    window.onload = () => {
        document.body.parentNode.style.overflowX = "hidden";
    }
    // 点击尺码盒子显示区域
    let oinput = document.querySelector("input");
    let omashu = document.querySelector(".mashu");
    oinput.onclick = function () {
        omashu.style.display = "block"
    }
    // 点击叉号盒子消失
    let ocha = document.querySelector(".cha");
    ocha.onclick = function () {
        omashu.style.display = "none"
    }
    // 点击数量盒子显示
    let oshu = document.querySelector(".shu");
    let oshuliang = document.querySelector(".shuliang");
    oshu.onclick = function () {
        oshuliang.style.display = "block"
    }
</script>